<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="renderer" content="webkit|ie-comp|ie-stand">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <meta http-equiv="Cache-Control" content="no-siteapp" />
  <title>部门列表</title>
  <script src="../../../static/kaige/js/szload.js"></script>
</head>

<body>
  <div class="kaige-body layui-form kaige-btn-radius" lay-filter="dept-index">
    <div class="layui-btn-group" style="margin-top:5px;margin-bottom: 5px;">
      <button type="button" class="layui-btn layui-bg-blue layui-btn-sm option-add">
        <i class="layui-icon layui-icon-add-circle"></i> 添加
      </button>
      <button type="button" class="layui-btn layui-bg-blue layui-btn-sm reload">
        <i class="fa fa-refresh"></i> 刷新
      </button>
      <button type="button" class="layui-btn layui-bg-blue layui-btn-sm open-all">
        <i class="fa fa-angle-double-down"></i> 全展开
      </button>
      <button type="button" class="layui-btn layui-bg-blue layui-btn-sm close-all">
        <i class="fa fa-angle-double-right"></i> 全关闭
      </button>
    </div>
    <table class="layui-table" id="deptTable" lay-filter="deptTable" lay-size="sm"></table>
  </div>

  <script>
    load_init_js([
    szoapcpath + '/static/kaige/js/xm-select.js',
    ],function () {
      layui.config({
        base: szoapcpath + '/static/kaige/layuiextend/'
      }).use(['treeTable', 'authtree', 'kaige', 'tableSelect'], function () {
        var form = layui.form, layer = layui.layer, table = layui.table, treeTable = layui.treeTable, element = layui.element,
          $ = layui.$, authtree = layui.authtree, kaige = layui.kaige, laydate = layui.laydate, tableSelect = layui.tableSelect;
        var treedata;
        //查看图片
        window.viewImage = function (imgUrl) { kaige.viewimage({ maxwidth: 600, maxheight: 600, url: imgUrl }); }
        // 渲染表格
        var deptre = treeTable.render({
          elem: "#deptTable",
          url: "/hrm.dept/index",
          icon_key: 'name',
          top_value: 0,
          primary_key: 'id',
          parent_key: 'pid',
          is_cache: true,
          cols: [
            { key: 'id', title: 'ID', width: '30px' },
            { key: 'name', title: '名称', width: '150px' },
            { key: 'code', title: '编码', width: '120px' },
            { key: 'headman', title: '负责人', width: '70px' },
            { key: 'sort', title: '排序', width: '50px' },
            {
              key: 'status', title: '启用', width: '70px', align: 'center', template: function (item) {
                return '<input type="checkbox"  value="' + item.id + '" ' + (item.status == 1 ? 'checked=""' : '') + ' lay-filter="statusdemo" lay-skin="switch" lay-text="启|禁">';
              }
            },
            {
              title: '操作', align: 'center', width: '140px', template: function (item) {
                var html = '<div class="layui-btn-group">';
                html += '<button type="button" class="layui-btn layui-bg-blue layui-btn-sm option-edit" data-pid="' + item.pid + '" data-id="' + item.id + '" title="编辑"><i class="fa fa-pencil-square"></i></button>';
                html += '<button type="button" class="layui-btn layui-bg-blue layui-btn-sm option-del" data-title="' + item.name + '" data-id="' + item.id + '" title="删除"><i class="fa fa-trash-o"></i></button>';
                html += '</div>';
                return html;
              }
            },
          ],
          end: function (e) {
            treedata = e.data;
            form.render(null, 'dept-index');
            //编辑
            $('.option-edit').click(function (e) {
              var id = $(this).attr('data-id');
              var pid = $(this).attr('data-pid');
              kaige.form({
                title: '<i class="layui-icon layui-icon-edit"></i> 编辑'
                , url: '/hrm.dept/edit' //数据源
                , data: { id: id }
                , id: 'kaige'
                , callbefore: function () {
                  addeditform();
                }
                , postbefore: function (udata) {
                  var updata = udata;
                  updata.is_lock = updata.is_lock ? 1 : 2;
                  updata.type = updata.type ? 1 : 2;
                  return updata;
                }
                , callback: function (res) {
                  res.status && treeTable.render(deptre);
                }
              });
            });

            //删除
            $('.option-del').click(function (e) {
              var id = $(this).attr('data-id');
              var title = $(this).attr('data-title');
              layer.confirm('真的要删除么', { icon: 3, title: '名称：' + title }, function (index) {
                $.post('/hrm.dept/del', { id: id }, function (res) {
                  if (res.status) {
                    layer.msg(res.msg, { time: 1000 }, function () {
                      treeTable.render(deptre);
                      layer.close(index);
                    });
                  } else {
                    layer.msg(res.msg);
                  }
                });
              });
            });
          },
        });

        function addeditform() {
          settopdept();
          dselemployee();
          //上级部门
          kaige.xmSelect({
            id: 'dept_id',
            url: '/select/dept',
            udata: { automatch: 1 },
            radio: true,
            clickClose: true
          });
          //所属单位
          kaige.xmSelect({
            id: 'company_id',
            url: '/select/company',
            udata: { automatch: 1 },
            radio: true,
            clickClose: true
          });
        }

        // 全部展开
        $('.open-all').click(function () {
          treeTable.openAll(deptre);
        })
        // 全部关闭
        $('.close-all').click(function () {
          treeTable.closeAll(deptre);
        });

        // 刷新
        $('.reload').click(function () {
          location.reload();
        });

        //设置顶级
        function settopdept() {
          $('#settopdept').on('click', function () {
            $('#dept_pid_name').val('顶级部门');
            $('#dept_pid_id').val(0);
          });
        }

        //添加
        $('.option-add').click(function (e) {
          kaige.form({
            title: '<i class="layui-icon layui-icon-add-circle"></i> 添加'
            , url: '/hrm.dept/add' //数据源
            , data: {}
            , id: 'kaige'
            , callbefore: function () {
              addeditform();
            }
            , postbefore: function (udata) {
              var updata = udata;
              updata.is_lock = updata.is_lock ? 1 : 2;
              updata.type = updata.type ? 1 : 2;
              return updata;
            }
            , callback: function (res) {
              res.status && treeTable.render(deptre);
            }
          });
        });

        //监听启禁用操作
        form.on('switch(statusdemo)', function (obj) {
          var udata = {
            id: (this.value).trim(),
            field: 'status',
            value: obj.elem.checked ? 1 : 2
          };
          szoa.post('/hrm.dept/setdisabled', udata, function (res) {
            layer.tips(udata.value == 1 ? '启用' : '禁用', obj.othis);
          });
        });

        //选择员工
        function dselemployee() {
          tableSelect.render({
            elem: '#sel_headman',
            searchKey: 'keywords',
            checkedKey: 'id',
            table: {
              url: '/select/employee',
              cols: [[
                { type: 'radio' },
                { field: 'id', title: 'ID', hide: true },
                { field: 'real_name', title: '姓名' },
                { field: 'phone', title: '手机' },
                { field: 'dept_id_name', title: '部门' }
              ]]
            },
            done: function (elem, data) {
              var NEWJSON = [], ids = [];
              layui.each(data.data, function (index, item) {
                NEWJSON.push(item.real_name);
                ids.push(item.id);
              })
              elem.val(NEWJSON.join(","));
              $('input[name=headid]').val(ids.join(","));
            }
          })
        }

      });
    });
  </script>
  <script type="text/html" id="kaige_form_html">
    <form class="layui-form layui-form-pane kaige-body-form" style="padding: 5px;" lay-filter="kaige_form_lay_filter">
      {{# if(d.id){ }}
      <input type="hidden" name="id" value="{{ d.id }}" />
      {{# } }}
      <div class="layui-form-item">
        <label class="layui-form-label">部门上级</label>
        <div class="layui-input-inline" style="width:220px">
          <div id="dept_id_select_box"></div>
          <input type="hidden" id="dept_id_name" name="dept_id_name" />
          <input type="hidden" id="dept_id" value="{{ d.pid || '' }}" name="pid" />
        </div>
        <div class="layui-input-inline border3" style="width:219px">
          <button type="button" id="settopdept" class="layui-btn layui-bg-blue layui-btn-sm" style="margin-top:3px;margin-left: 5px;">设置为顶级 </button>
      </div>    
      </div>
      <div class="layui-form-item">
        <label class="layui-form-label">部门名称</label>
        <div class="layui-input-inline" style="width:220px">
          <input type="text" name="name" required lay-verify="required" value="{{ d.name || '' }}" placeholder="请输入名称" autocomplete="off" class="layui-input" />
        </div>
        <label class="layui-form-label">编码</label>
        <div class="layui-input-inline" style="width:220px">
          <input type="text" name="code" required lay-verify="required" value="{{ d.code || '' }}" placeholder="请输入编码" autocomplete="off" class="layui-input" />
        </div>
      </div>
    
      <div class="layui-form-item">
        <label class="layui-form-label">负责人</label>
        <div class="layui-input-inline" style="width:220px">
          <input type="text" name="headman" value="{{ d.headman|| '' }}" autocomplete="off" class="layui-input"  id="sel_headman"/>
          <input type="hidden" name="headid" value="{{ d.headid|| '' }}" />
        </div>
        <label class="layui-form-label">所属单位</label>
        <div class="layui-input-inline" style="width:220px">
          <div id="company_id_select_box"></div>
          <input type="hidden" id="company_id_name" value="{{ d.company_id_name || '' }}" name="company_id_name" />
          <input type="hidden" id="company_id" value="{{ d.company_id || '' }}" name="company_id" />
        </div>
      </div>
      <div class="layui-form-item">
        <label class="layui-form-label">排序</label>
        <div class="layui-input-inline" style="width:220px">
          <input type="text" name="sort" class="layui-input" value="{{ typeof(d.sort)==='number' ? d.sort: '' }}" />
        </div>
        <label class="layui-form-label">禁用</label>
        <div class="layui-input-inline border3" style="width:219px">
          <input type="checkbox" name="status" lay-skin="switch" lay-text="启用|禁用"  {{#  if(d.status == 1 ){ }} checked {{#  } }} />
        </div>
      </div>
      <div class="layui-form-item layui-hide">
        <button class="layui-hide" lay-submit="" id="kaige_form_btn_save" lay-filter="kaige_form_btn_save">保存数据</button>
      </div>
    </form>
  </script>
</body>

</html>